<template>
  <div
    class="command-container"
    v-show="isShowCmd"
    :style="
      infoStore.isMobile
        ? ''
        : {
            width: '700px',
          }
    "
  >
    <el-select
      v-model="select"
      slot="prepend"
      placeholder="请选择"
      size="small"
    >
      <el-option label="run js" value="func"></el-option>
      <el-option label="cmd" value="cmd"></el-option>
      <!-- <el-option label="infoStore" value="info"></el-option> -->
      <!-- <el-option label="cardStore" value="card"></el-option> -->
      <el-option label="Exit" value="Exit"></el-option>
    </el-select>
    <el-input
      type="textarea"
      :autosize="{ minRows: 1, maxRows: infoStore.isMobile ? 30 : 20 }"
      :placeholder="txt"
      v-model="textarea"
    >
      <!-- @input="handleCmd" -->
    </el-input>
    <el-button
      slot="append"
      @click="handleCmd"
      size="small"
      :style="infoStore.isMobile ? '' : { height: '36px' }"
      >Run</el-button
    >

    <!-- 单行 -->
    <!-- <div style="margin-top: 15px">
      <el-input
        placeholder="请输入指令"
        v-model="inputTxt"
        class="input-with-select"
        @input="handleCmd"
      >
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="cmd" value="cmd"></el-option>
          <el-option label="infoStore" value="info"></el-option>
          <el-option label="cardStore" value="card"></el-option>
        </el-select>
        <el-button slot="append">Run</el-button>
      </el-input>
    </div> -->
  </div>
</template>

<script>
import getRandom from "@/utils/getRandom";
import delay from "@/utils/delay";
import distinct from "@/utils/distinct";
import debounce from "@/utils/debounce";
import help from "@/utils/help";
import { request } from "@/api/request";
import { fetchRequ } from "@/api/fetchRequ";

export default {
  props: {
    isShowCmd: {
      // 命令窗口是否显示
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      infoStore: this.$store.state.info,
      cardStore: this.$store.state.cards,
      colorStore: this.$store.state.color,
      requStore: this.$store.state.requestData,
      inputTxt: "",
      select: "func",
      textarea: this.$store.state.info.textarea, // 文本域的内容
    };
  },
  computed: {
    txt() {
      if (this.select === "func") {
        return "请输入js代码, 输入help可查看帮助";
      } else if (this.select === "cmd") {
        return "请输入cmd指令, 输入help可查看帮助";
      }
    },
  },
  watch: {
    select(newVal) {
      if (newVal === "Exit") {
        // 退出命令窗口
        this.select = "func";
        this.$store.commit("cards/setIsShowCmd", false);
      }
    },
    textarea() {
      this.$store.commit("info/setTextarea", this.textarea);
    },
    "infoStore.textarea"() {
      this.textarea = this.infoStore.textarea;
    },
  },
  mounted() {
    // 函数防抖
    // this.handleCmd = debounce(this.handleCmd, 1000);
    // var parsed = JSON.parse('{"one":"700","two":"function(){const arr=[];for(let i=0;i<3;i++){arr.push(i)};return arr;}" }');
    // var func = new Function("return " + parsed.two)(); // return parsed.two function
    // alert(typeof func); // function
    // alert(func()); // 0, 1, 2
  },
  methods: {
    async handleCmd() {
      console.log(this.select + "指令: " + this.textarea);
      let content = this.textarea;
      // JSON.stringify(obj); // 将对象或数组转换为JSON格式
      // JSON.parse(jsonString); // 将JSON格式的字符串转换为对象或数组

      // help指令
      switch (this.textarea) {
        case "h":
        case "H":
        case "-h":
        case "-H":
        case "-help":
        case "help":
        case "-Help":
        case "Help":
          this.textarea = "// help\n/*\n" + help.help + "\n*/\n";
          return;
        case "h code":
        case "help code":
          this.textarea = "// help code\n/*\n" + help.code + "\n*/\n";
          return;
        case "h infoStore":
        case "help infoStore":
          this.textarea = "// help infoStore\n/*\n" + help.infoStore + "\n*/\n";
          return;
        case "h cardStore":
        case "help cardStore":
          this.textarea = "// help cardStore\n/*\n" + help.cardStore + "\n*/\n";
          return;
        case "h colorStore":
        case "help colorStore":
          this.textarea =
            "// help colorStore\n/*\n" + help.colorStore + "\n*/\n";
          return;
        case "h eventBus":
        case "help eventBus":
          this.textarea = "// help eventBus\n/*\n" + help.eventBus + "\n*/\n";
          return;
        case "h cmd":
        case "help cmd":
          this.textarea = "// help cmd\n/*\n" + help.cmd + "\n*/\n";
          return;
        case "test help":
          this.textarea = "test axios\ntest fetch";
          return;
        case "test axios":
          this.textarea = "// test axios\n" + help.axiosRequ;
          return;
        case "test fetch":
          this.textarea = "// test fetch\n" + help.fetchRequ;
          return;
        default:
          break;
      }

      // const consolelog = (a) => {
      //   this.textarea += "\n/*\n" + a + "\n*/\n";
      // };
      const type = this.$type;
      const clearlog = () => {
        this.textarea = "";
      };
      const relog = (a) => {
        this.textarea = "";
        this.textarea = "\n/*\n" + a + "\n*/\n";
      };
      try {
        if (this.select === "func") {
          // 运行输入的代码
          const funcStr =
            `async function (
            content,
            consolelog,
            clg,
            clearlog,
            relog,
            getRandom,
            distinct,
            delay,
            debounce,
            request
          ) {
            try {` +
            content +
            `} catch (err) {
              consolelog(err);
            }
          }`;
          var func = new Function("return " + funcStr)();
          await func.call(
            this,
            content,
            this.$consolelog,
            this.$consolelog,
            clearlog,
            relog,
            getRandom,
            distinct,
            delay,
            debounce,
            request
          );
        } else if (this.select === "cmd") {
          const data = content.split(" "); // [cmd data]
          switch (data[0]) {
            case "clg": // 打印
              this.$consolelog(data[1]);
              return;
            case "getcards": // 获取全部卡片
            case "getCards": // 获取全部卡片
              localStorage.setItem(
                "myCards",
                "srazbacbdcedfegfhgihjikjlkmlnmonpoqprq"
              );
              this.$store.commit("cards/getCards");
              this.$store.commit("cards/setIsShowCmd", false);
              return;
            case "clear":
            case "clearcards":
            case "clearCards": // 清除全部卡片 以及 关卡进度
              this.$store.commit("cards/clearCards");
              this.$store.commit("cards/getCards");
              this.$store.commit("cards/getLevel");
              this.$store.commit("cards/setLevelNum", 1);
              this.$store.commit("cards/setIsShowCmd", false);
              return;
            case "info":
            case "infostore":
            case "infoStore":
              this.$store.commit("info/" + data[1], data[2]);
              this.$store.commit("cards/setIsShowCmd", false);
              return;
            case "card":
            case "cards":
            case "cardstore":
            case "cardStore":
              this.$store.commit("cards/" + data[1], data[2]);
              this.$store.commit("cards/setIsShowCmd", false);
              return;
            case "emit": // 向事件总线中抛出一个事件
              this.$bus.$emit(data[1], data[2]);
              return;
            case "request": // 发送请求 [请求类型 请求地址 附加信息]
              let resp;
              if (data.length === 4) {
                resp = await request[data[1]](data[2], data[3]);
              } else {
                resp = await request[data[1]](data[2]);
              }
              console.log(resp);
              this.$consolelog(resp);
              if (resp) {
                resp.status && this.$consolelog("status:", resp.status);
                resp.data && this.$consolelog("data:", resp.data);
                resp.headers && this.$consolelog("headers:", resp.headers);
                resp.request && this.$consolelog("request:", resp.request);
              }
              return;
            // case "getcards":
            //   return;
            default:
              break;
          }
        } else if (this.select === "info") {
          // funcName args[json]
        } else if (this.select === "card") {
        }
      } catch (err) {
        this.textarea += "\n/*\n" + err + "\n*/\n";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.command-container {
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  position: fixed;
  display: flex;
  width: 500px;
  left: 50%;
  top: 50%;
  z-index: 1410;
  transform: translate(-50%, -50%);
  .el-button.el-button--default.el-button--small {
    height: 30px;
  }
  .el-select {
    position: absolute;
    top: -35px;
    left: 0px;
    width: 120px;
  }
}
</style>
